<template>
	<el-row>
		<el-col :span="24">
			<el-card>
				<el-row :gutter="20">
					<el-col :span="16">
						<el-button type="success" style="margin-bottom: 10px;"
							@click="showAddModel">新增</el-button>
						<el-popconfirm title="你确定导出该工资单吗？" confirm-button-text="确定" cancel-button-text="取消"
							@confirm="uploadExcel">
							<template #reference>
								<el-button style="margin-bottom: 10px;" type="danger">导出表格</el-button>
							</template>
						</el-popconfirm>
					</el-col>
					<el-col :span="8">
						<div class="m-4">
							<div class="block" style="float: right; margin-right: 10px;">
								<el-date-picker v-model="data" type="month" placeholder="请选择月份账单" @change="selectAll(1)"/>
								<el-button type="danger" :icon="Delete" circle  size="small" style="margin-left: 5px" @click="clearData"/>
							</div>
						</div>
					</el-col>
				</el-row>
				<el-table :data="salaryPageInfo.list" border style="width: 100%; margin-top: 30px;">
					<el-table-column prop="sid" label="ID" width="50px" />
					<el-table-column prop="medicalStaff.mno" label="员工号" width="80px" />
					<el-table-column prop="medicalStaff.mname" label="员工姓名" width="100px" />
					<el-table-column prop="picdir" label="头像" width="110px">
						<template #default="scope">
							<el-avatar :size="80"
								:src="SERVER_ADDR + '/upload/' + scope.row.medicalStaff.picdir"></el-avatar>
						</template>
					</el-table-column>
					<el-table-column prop="payday" label="发薪日期" width="120px" />
					<el-table-column prop="medicalStaff.entryDate" label="入职日期" width="120px" />
					<el-table-column prop="comm" label="提成" width="80px" />
					<el-table-column prop="prize" label="奖金" width="80px" />
					<el-table-column prop="cowa" label="考勤" width="80px" />
					<el-table-column prop="salary" label="基本工资" width="100px" />
					<el-table-column prop="sumnum" label="实际工资" width="100px" />
					<el-table-column prop="medicalStaff.mphone" label="联系方式" width="200px" />
					<el-table-column label="操作" width="70px">
						<template #default="scope">
							<el-button type="primary" style="width: 15px;" :icon="View"
								@click="selectByMid(scope.row.payday, scope.row.mid)" />
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页开始 -->
				<el-row class="row-bg" justify="center">
					<el-col :span="5">
						<div class="grid-content ep-bg-purple" />
					</el-col>
					<el-col :span="8">
						<el-pagination background layout="prev, pager, next" :page-count="salaryPageInfo.pages"
							@change="selectAll" style="margin-top: 10px; margin-left: 25%;"
							v-model:urrent-page="salaryPageInfo.pageNum" />
					</el-col>
					<el-col :span="5">
						<div class="grid-content ep-bg-purple" />
					</el-col>
				</el-row>
				<!-- 分页结束 -->
			</el-card>
		</el-col>
	</el-row>
	<!-- 详细信息框开始 -->
	<el-drawer v-model="drawer" title="详细工资" :with-header="false">
		<el-descriptions title="详细工资" direction="vertical" :column="4" :size="size" border>
			<el-descriptions-item label="员工名">{{ salaryByMid.medicalStaff.mname }}</el-descriptions-item>
			<el-descriptions-item label="手机号">{{ salaryByMid.medicalStaff.mphone }}</el-descriptions-item>
			<el-descriptions-item label="发薪日期" :span="2">{{ salaryByMid.payday }}</el-descriptions-item>
		</el-descriptions>

		<el-descriptions title="工资明细" :column="5" :size="size" direction="vertical" :style="blockMargin">
			<el-descriptions-item label="提成">+{{ salaryByMid.comm }}</el-descriptions-item>
			<el-descriptions-item label="奖金">+{{ salaryByMid.prize }}</el-descriptions-item>
			<el-descriptions-item label="考勤">-{{ salaryByMid.cowa }}</el-descriptions-item>
			<el-descriptions-item label="五险一金">-{{ salaryByMid.fiaof }}</el-descriptions-item>
			<el-descriptions-item label="基本工资">+{{ salaryByMid.salary }}</el-descriptions-item>
			<el-descriptions-item label="最终工资">
				<el-tag size="small">综合新增</el-tag>
			</el-descriptions-item>
			<el-descriptions-item label="">
				{{ salaryByMid.medicalStaff.mname }}的最终工资是{{ salaryByMid.sumnum }}
			</el-descriptions-item>
		</el-descriptions>
	</el-drawer>
	<!-- 详细信息框结束 -->
	 <!-- 新增工资对话框开始 -->
	<el-dialog v-model="addDialoadShow" title="新增工资" width="500">
		<el-form>
			<el-form-item label="员工" label-width="20%">
				<el-select v-model="addSalary.mid" clearable placeholder="所选员工" style="width: 240px" @change="selectByMidAdd(addSalary.mid)">
					<el-option v-for="item in allMedicals" :key="item.mid" :label="item.values" :value="item.mid" />
				</el-select>
			</el-form-item>
			<el-form-item label="发薪日期" label-width="20%">
				<el-date-picker v-model="addSalary.payday" type="date" placeholder="请选择一个时间" format="YYYY-MM-DD"
					value-format="YYYY-MM-DD" style="width: 240px" />
			</el-form-item>
			<el-form-item label="提成" label-width="20%">
				<el-input v-model="addSalary.comm" autocomplete="off" style="width: 240px" />
			</el-form-item>
			<el-form-item label="奖金" label-width="20%">
				<el-input v-model="addSalary.prize"  autocomplete="off" style="width: 240px" />
			</el-form-item>
			<el-form-item label="考勤扣款" label-width="20%">
				<el-input v-model="addSalary.cowa" autocomplete="off" style="width: 240px" />
			</el-form-item>
			<el-form-item label="五险一金" label-width="20%">
				<el-input v-model="addSalary.fiaof" autocomplete="off" style="width: 240px" />
			</el-form-item>
			<el-form-item label="基本薪资" label-width="20%">
				<el-input v-model="addSalary.salary" autocomplete="off" style="width: 240px" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="addDialoadShow=false">取消</el-button>
				<el-button type="primary" @click="insert">
					确定
				</el-button>
			</div>
		</template>
	</el-dialog>
	<!-- 新增工资对话框结束 -->
</template>
<script setup>
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
import { DataAnalysis, Minus, Delete, View } from '@element-plus/icons-vue'
import salaryApi from '@/api/admin/salaryApi.js';
import { ElNotification } from 'element-plus'
//服务器路径
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR);
//定义工资的分页
const salaryPageInfo = ref({});
const data = ref('');
//定义查询所有的工资方法
const selectAll = (pageNum) => {
	salaryApi.selectAll(pageNum, data.value)
			.then(resp => {
			salaryPageInfo.value = resp.data
		})
}
//定义回显数据
const salaryByMid = ref({});
const drawer = ref(false);
//定义回显方法
const selectByMid = (data, mid) => {
	salaryApi.selectByMid(data, mid)
		.then(resp => {
			if (resp.code == 10000) {
				salaryByMid.value = resp.data
				drawer.value = true;
			}

		})
}
//定义清除时间
const clearData = () => {
	data.value = ''
	selectAll(1)
}
//控制新增对话框
const addDialoadShow = ref(false);
//定义所有的护工
const allMedicals = ref([]);
//定义新增工资
const addSalary = ref({
		payday: "",
		comm: "",
		prize: "",
		cowa: "",
		fiaof: "",
		salary: "",
		sumnum: "",
		mid: '',
});
//定义显示新增对话框
const showAddModel = () =>{
	//查询所有在职的员工
	salaryApi.allMedical()
		.then(resp => {
			if(resp.code == 10000){
				allMedicals.value = resp.data;
				addDialoadShow.value = true;
			}
		})
}
//根据mid查询工资是否存在
const selectByMidAdd = (mid) => {
	salaryApi.selectByMidAdd(mid)
		.then(resp => {
			if(resp.code == 10000){
				ElNotification({
						title: '错误',
						message: '该员工这个月已经有工资了',
						type: 'error',
					})
				addSalary.value.mid = ''
			}
		})
}
//定义新增工资函数
const insert = () =>{
	salaryApi.insert(addSalary.value)
		.then(resp =>{
			if(resp.code == 10000){
				ElNotification({
						title: '成功',
						message: resp.msg,
						type: 'success',
				})
				selectAll(salaryPageInfo.value.pageNum)
				addDialoadShow.value = false;
				addSalary.value = {
						payday: "",
						comm: "",
						prize: "",
						cowa: "",
						fiaof: "",
						salary: "",
						sumnum: "",
						mid: '',
				}
			}else{
				ElMessage.error(resp.msg)
			}
		})
}
//导出工资
const uploadExcel = ()=>{
		salaryApi.uploadExcel(data.value)
		.then(response => {
			ElMessage.success("正在下载Excel")
			// 请求成功返回后，获取到Excel文件的二进制数据
			const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
			// 创建下载链接
			const downloadUrl = URL.createObjectURL(blob);
			// 创建一个隐藏的a标签，设置下载链接和文件名，模拟点击下载
			const link = document.createElement('a');
			link.style.display = 'none';
			link.href = downloadUrl;
			link.download = data.value + '工资.xlsx';
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
			}).catch(error => {
			// 请求失败处理
			console.error(error);
			})
	}
selectAll(1);
</script>
<style scoped>
.demo-progress .el-progress--line {
	margin-bottom: 10px;
	max-width: 100%;
}

.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .container {
  flex: 1;
  border-right: solid 1px var(--el-border-color);
}

.demo-date-picker .container .block {
  border-right: none;
}

.demo-date-picker .container .block:last-child {
  border-top: solid 1px var(--el-border-color);
}

.demo-date-picker .container:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>